<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  // goal:
  // - display foo when url is at #foo
  // - display bar when url is at #bar

  // to access the current hash:
  window.location.hash
  // to listen for hash changes:
  window.addEventListener('hashchange', () => {
    // read hash and update app
  })
</script>

<div id="app">
  <!-- render main view here -->
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <component :is="hash"></component>
</div>

<script>
  window.addEventListener('hashchange', () => {
    app.hash = window.location.hash.slice(1)
  })

  const app = new Vue({
    el: '#app',
    data: {
      hash: window.location.hash.slice(1)
    },
    components: {
      foo: { template: `<div>foo</div>` },
      bar: { template: `<div>bar</div>` }
    }
  })
</script>